<template>
    <view class="liaison-box">
			<scroll-view scroll-y="true" class="scroll-Y">
				<u-radio-group class="radio" v-model="value" @change="radioGroupChange">
					<view class="liaison-item" v-for="(item,index) in liaisonList" :key="index">
							<u-radio :name="index+1">
								<view class="item-center">
										<view class="center-tag">
											<text class="t1 t2" v-if="item.isDefault == 1" key='-1'>默认</text>
											<text class="t1" v-for="(v,i) in drugRelationList" v-if="item.drugRelation == v.dictValue" :key='i'>{{v.dictName}}</text>
										</view>
										<view class="center-info">
												<text class="t1">{{item.name}}</text>
												<text class="t2">{{item.telPhone}}</text>
										</view>
								</view>
							</u-radio>
							<view class="item-right" @click="goEdit(item)">
									<img src="@/static/images/edit.png" alt="">
							</view>
					</view>
				</u-radio-group>
			</scroll-view>
			<view class="liaison-but">
			   <u-button class="liaison-button" @click="addLiaison" type="primary" shape="circle" >新增联系人</u-button>
			</view>
    </view>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
	props:{
		defaultValue:{
			type:[String,Number],
			default:0
		}
	},
	data() {
		return {
     value:0,
		}
	},
	mounted() {
		this.value = this.defaultValue
	},
	created() {
		this.init()
	},
	computed:{
		...mapState({
			drugRelationList: state => state.shop.drugRelationList,
			liaisonList: state => state.person.liaisonList,
		})
	},
	methods: {
		...mapActions(['ActGetLiaisonList','ActGetAppDictList']),
		radioGroupChange(e){
			this.value = e
		},
		goEdit(item){
			this.$u.route({
				url:'/pages/person/editLiaison',
				params:{
					telPhone:item.telPhone,
					drugRelation:item.drugRelation,
					name:item.name,
				}
			})
		},
		addLiaison(){
			this.$u.route({
			    url:'/pages/person/addLiaison'
			})
		},
		async init(){
			// await this.ActGetAppDictList({
			// 	dictType:'drug_relation',
			// 	isCtr:'0'
			// })
			// await this.ActGetLiaisonList()
		}
	},
	watch:{
		value(value){
			if(value != this.defaultValue) {
				this.$emit('check',value)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.liaison-box{
	.scroll-Y{
		height: 53vh;
	}
	.liaison-item{
		width: 100%;
		margin: 0 20rpx;
		display: flex;
		border-bottom: 2rpx solid #f6f6f6;
		background-color: #fff;
		.item-left{ 
				margin: auto 0 auto 24rpx;
		}
		.item-center{
			width: 70vw;
			margin-left: 20rpx;
				flex: 1;
				.center-tag{
					padding-top: 22rpx;
					.t1{
							background-color: $u-type-error;
							color: #fff;
							font-size: 22rpx;
							padding: 4rpx 8rpx;
							border-radius: 4rpx;
					}
					.t2{
							background-color: $u-type-primary;
							margin-right: 16rpx;
					}
			}
			.center-address{
					padding-top: 10rpx;
			}
			.center-info{
					padding: 16rpx 0 24rpx 0;
					.t2{
							margin-left: 84rpx;
					}
			}
		}
		.item-right{
			margin: auto 24rpx;
			img{
					display: block;
					width: 48rpx;
					height: 48rpx;
			}
		}
	}
	.liaison-but{
		height: 72rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #fff;
		padding: 16rpx 0;
			.liaison-button{
				width: 94%;
			}
	}
}
</style>